import React, { Component } from 'react';
import '../styles/MyTabber.css'
class MyTabbar extends Component {
    constructor(props) {
        super(props)
        this.state={
            tabs:[
                {text:"店铺"},
                {text:"分类"},
                {text:"全部商品"},
                {text:"购物车"},
                {text:"个人中心"},
            ],
            currentIndex:0
        }
    }
    handleClick(index){
        this.setState({
            currentIndex:index
        },()=>{console.log(this.state.currentIndex)})
    }
    render() {
        return (
            <div className='footer'>
                
                {this.state.tabs.map((item,index)=>{
                    return (
                        <div className={`tab ${this.state.currentIndex===index?'active':''}`} onClick={()=>{this.handleClick(index)}} key={index}>
                            <div className='text'>{item.text}</div> 
                        </div>
                    )
                })
                // {/* <ul>
                //     <li>店铺</li>
                //     <li>分类</li>
                //     <li>全部商品</li>
                //     <li>购物车</li>
                //     <li>个人中心</li>
                // </ul> */}
                }
            </div>
        );
    }
}

export default MyTabbar;